<template>
	<view>
		<u-navbar height="50" back-icon-color="#333" title="账号注册" 
			title-color="#333" title-size="36"></u-navbar>
		<view class="line"></view>
		<view class="layoutView">
			<view class="logoView">
				<image class="logoIcon" :src="logoUrl"></image>
			</view>
		</view>
		<view class="layoutView2">
			<view class="inputView">
				<image class="inputIcon" src="/static/phone.png" mode="aspectFit"></image>
				<input placeholder="请输入11位数字手机号" v-model="phone"/>
			</view>
			<!-- <view class="inputView">
				<image class="inputIcon" src="/static/code.png" mode="aspectFit"></image>
				<input placeholder="请输入验证码" v-model="smsCode" />
				<text class="codeView" @click="onGetCode()">{{smsText}}</text>
			</view> -->
			<view class="inputView">
				<image class="inputIcon" src="/static/pwd.png" mode="aspectFit"></image>
				<input placeholder="请输入密码" password v-model="password" />
			</view>
			<view class="inputView">
				<image class="inputIcon" src="/static/pwd.png" mode="aspectFit"></image>
				<input placeholder="请输入确认密码" password v-model="password2" />
			</view>
			<view class="checkView" @click="onCheck(isCheck)">
				<image class="checkIcon" src="/static/selected.png" v-if="isCheck"></image>
				<image class="checkIcon" src="/static/unselected.png" v-else></image>
				<view class="checkText">我已阅读并同意<text @click.stop="onAgreement()">《用户协议》</text>和<text
						@click.stop="onPolicy()">《隐私政策》</text></view>
			</view>
			<view class="register" @click="onRegister()">立即注册</view>
			<view class="loginView">已有账号，<text @click="onLogin()">立即登录</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				smsCode: '',
				password: '',
				password2: '',
				isCheck: false,
				timers: null,
				time: 60,
				smsText: '发送验证码',
				logoUrl: ''
			}
		},
		onLoad() {
			this.initLogo();
		},
		methods: {
			initLogo(){
				let self = this;
				self.$api.getLogo({}, true).then(res => {
					self.logoUrl = res.data.logo;
				});
			},
			onCheck(isCheck) {
				this.isCheck = !isCheck;
			},
			onGetCode() {
				let self = this
				if (self.timers != null) {
					self.$utils.tips(self.time + 's后重新发送');
					return;
				}
				if (self.$utils.isEmpty(self.phone)) {
					self.$utils.tips('请输入手机号');
					return
				}
				self.$user.getCode({
					phone: this.phone
				}, true).then(res => {
					self.$utils.tips('短信发送成功');
					self.timers = setInterval(() => {
						self.timeout();
					}, 1000);
				});
			},
			timeout() {
				let self = this
				if (self.time == 0) {
					self.smsText = "发送验证码"
					self.time = 60
					clearInterval(self.timers);
					self.timers = null;
				} else {
					self.time--
					self.smsText = self.time + 's后重新发送'
				}
			},
			onRegister() {
				let self = this;
				if (self.$utils.isEmpty(self.phone)) {
					self.$utils.tips('请输入手机号');
					return
				}
				// if (self.$utils.isEmpty(self.smsCode)) {
				// 	self.$utils.tips('请输入验证码');
				// 	return
				// }
				if (self.$utils.isEmpty(self.password)) {
					self.$utils.tips('请输入密码');
					return
				}
				if (self.$utils.isEmpty(self.password2)) {
					self.$utils.tips('请输入确认密码');
					return
				}
				if (!self.isCheck) {
					self.$utils.tips('请仔细阅读《用户协议》和《隐私政策》');
					return
				}
				self.$user.register({
					code: self.smsCode,
					area_code: '86',
					phone: this.phone,
					password: this.password,
					password_confirmation: this.password2
				}, true).then(res => {
					self.$utils.tips('注册成功');
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 500);
				});
			},
			onAgreement() {
				this.$utils.jump('/other/web-data/web-data?type=1');
			},
			onPolicy() {
				this.$utils.jump('/other/web-data/web-data?type=2');
			},
			onLogin() {
				this.$utils.jump('/pages/login/login');
			}
		}
	}
</script>

<style>
	@import url('register.css');
</style>
